<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/axios.min.js"></script>
</head>

<body>
<!-- 头部模块 -->
<header>
    <h1><span>数据可视化页面设计</span></h1>
    <p><span>Data visualization page design</span></p>
</header>

<div class="main">
    <!-- top5 -->
    <div class="top5">
        <div class="top5-title">
            <span>品牌销售TOP5</span>
        </div>

        <!-- 数据一 -->
        <div class="top5-content">
            <ul id="findAllList">
                <!-- <li>
                    <div class="cicle"></div>
                    <div class="li-content">
                        <span>××品牌</span>
                        <span>15862</span>
                        <span>82%</span>
                        <span><img src="./images/up.png" alt=""></span>
                    </div>
                </li>
                <li>
                    <div class="cicle"></div>
                    <div class="li-content">
                        <span>××品牌</span>
                        <span>15862</span>
                        <span>82%</span>
                        <span><img src="./images/up.png" alt=""></span>
                    </div>
                </li>
                <li>
                    <div class="cicle"></div>
                    <div class="li-content">
                        <span>××品牌</span>
                        <span>15862</span>
                        <span>82%</span>
                        <span><img src="./images/up.png" alt=""></span>
                    </div>
                </li>
                <li>
                    <div class="cicle"></div>
                    <div class="li-content">
                        <span>××品牌</span>
                        <span>15862</span>
                        <span>82%</span>
                        <span><img src="./images/up.png" alt=""></span>
                    </div>
                </li>
                <li>
                    <div class="cicle"></div>
                    <div class="li-content">
                        <span>××品牌</span>
                        <span>15862</span>
                        <span>82%</span>
                        <span><img src="./images/down.png" alt=""></span>
                    </div>
                </li> -->
            </ul>

        </div>
        <script>
            var data, obj;
            axios.get('/findAllList')
                .then(function(res) {
                    console.log(res);
                    console.log(res.data);
                    obj = res.data
                    console.log(obj.data);
                    data = obj.data
                    console.log(data);
                    var findAllList = '';
                    for (let i = 0; i < data.length; i++) {
                        const arr = data[i]
                        findAllList += `
                            <li>
                            <div class="cicle"></div>
                            <div class="li-content">
                            <span>` + arr.brand + `</span>
                            <span>` + arr.quantity + `</span>
                            <span>` + arr.percentage + `</span>
                            <span><img src="imagesp.png" alt=""></span>
                            </div>
                            </li>
                            `
                    }
                    document.getElementById('findAllList').innerHTML = findAllList;


                })
                .catch(function(error) {
                    console.log(error);
                    return error
                });
        </script>


        <div class="top5-title">
            <span>大类销售分析</span>
        </div>
    </div>



    <!-- 销售总额 -->
    <div class="total" id="findAllSummary">


        <!-- <div class="data1">
            <span>年销售</span>
            <p>5684710411</p>
        </div>
        <div class="data2">
            <span>月销售</span>
            <p>1457104</p>
        </div>
        <div class="data3">
            <span>周销售</span>
            <p>564710</p>
        </div>
        <div class="data4">
            <span>日销售</span>
            <p>14504</p>
        </div> -->



        <canvas class="rain"></canvas>
        <canvas class="dashed"></canvas>
        <div class="sphere">
            <div class="sphere-bg"></div>
            <div class="sum">
                <span>销售总额</span>
                <p>568971401</p>
            </div>
        </div>
        <div class="cicle3"></div>
        <div class="cicle4"></div>
        <div class="cicle5"></div>
        <div class="cicle6"></div>
        <div class="cicle7"></div>
        <div class="cicle8">
            <span>89%</span>
            <p>同比</p>
        </div>
        <div class="cicle9">
            <span>89%</span>
            <p>完成率</p>
        </div>
        <div class="cicle10">
            <span>89%</span>
            <p>售罄率</p>
        </div>
        <div class="cicle11">
            <span>89%</span>
            <p>折扣率</p>
        </div>
    </div>
    <script>
        var data, obj;
        axios.get('/findAllSummary')
            .then(function(res) {
                console.log(res);
                console.log(res.data);
                obj = res.data
                console.log(obj.data);
                data = obj.data
                console.log(data);
                var findAllSummary = '';
                for (let i = 0; i < data.length; i++) {
                    const arr = data[i]
                    findAllSummary += `
                        <div class="data1">
                            <span>年销售</span>
                            <p>` + arr.year + `</p>
                        </div>
                        <div class="data2">
                            <span>月销售</span>
                            <p>` + arr.month + `</p>
                        </div>
                        <div class="data3">
                            <span>周销售</span>
                            <p>` + arr.week + `</p>
                        </div>
                        <div class="data4">
                            <span>日销售</span>
                            <p>` + arr.day + `</p>
                        </div>
                        <canvas class="rain"></canvas>
                        <canvas class="dashed"></canvas>
                        <div class="sphere">
                            <div class="sphere-bg"></div>
                            <div class="sum">
                                <span>销售总额</span>
                                <p>` + arr.year + `</p>
                            </div>
                        </div>
                        <div class="cicle3"></div>
                        <div class="cicle4"></div>
                        <div class="cicle5"></div>
                        <div class="cicle6"></div>
                        <div class="cicle7"></div>
                        <div class="cicle8">
                            <span>89%</span>
                            <p>同比</p>
                        </div>
                        <div class="cicle9">
                            <span>89%</span>
                            <p>完成率</p>
                        </div>
                        <div class="cicle10">
                            <span>89%</span>
                            <p>售罄率</p>
                        </div>
                        <div class="cicle11">
                            <span>89%</span>
                            <p>折扣率</p>
                        </div>
                        `
                }
                document.getElementById('findAllSummary').innerHTML = findAllSummary;


            })
            .catch(function(error) {
                console.log(error);
                return error
            });
    </script>



    <!-- 会销分析 -->
    <div class="analyse">
        <div class="analyse-title">
            <span>会销情况分析</span>
        </div>
        <ul id="findAllTarget">
            <!-- <li>
                <img src="./images/s1.png" alt="">
                <h5>会销目标</h5><br>
                <span>Marketing Target</span><br>
                <em>￥4,374,266</em>
            </li>
            <li>
                <img src="./images/s3.png" alt="">
                <h5>会销目标</h5><br>
                <span>Marketing Target</span><br>
                <em>￥4,374,266</em>
            </li>
            <li>
                <img src="./images/s2.png" alt="">
                <h5>会销目标</h5><br>
                <span>Marketing Target</span><br>
                <em>￥4,374,266</em>
            </li> -->
        </ul>
        <script>
            var data, obj;
            axios.get('/findAllTarget')
                .then(function(res) {
                    console.log(res);
                    console.log(res.data);
                    obj = res.data
                    console.log(obj.data);
                    data = obj.data
                    console.log(data);
                    var findAllTarget = '';
                    for (let i = 0; i < data.length; i++) {
                        const arr = data[i]
                        findAllTarget += `
                            <li>
                                <img src=` + (i + 1) + `"images/s.png" alt="">
                                <h5>` + arr.content + `</h5><br>
                                <span>` + arr.time + `</span><br>
                                <em>￥` + arr.money + `</em>
                            </li>
                            `
                    }
                    document.getElementById('findAllTarget').innerHTML = findAllTarget
                })
                .catch(function(error) {
                    console.log(error);
                })
        </script>
        <div class="execution">
            <div class="title">完成情况</div>
            <div class="cicle1"></div>
            <div class="cicle2"></div>
            <div class="waterChart1">
                <div class="chart-title">会销完成率</div>
                <div class="chart1"></div>
            </div>
            <div class="waterChart2">
                <div class="chart-title">会销占比</div>
                <div class="chart2"></div>
            </div>
        </div>
    </div>
    <!-- 鞋服配销售分析 -->
    <div class="sale">




        <ul id="findAllAnalysis">
            <!-- <li>
                <div class="showImg">
                    <img src="./images/shoe.png" alt="">
                </div>
                <div class="data">
                    <span>鞋类</span>
                    <span>52563</span>
                </div>
                <div class="shoeChart"></div>
            </li>
            <li>
                <div class="showImg">
                    <img src="./images/clothes.png" alt="">
                </div>
                <div class="data">
                    <span>服装</span>
                    <span>32563</span>
                </div>
                <div class="clothesChart"></div>
            </li>
            <li>
                <div class="showImg">
                    <img src="./images/mz.png" alt="">
                </div>
                <div class="data">
                    <span>配饰</span>
                    <span>12563</span>
                </div>
                <div class="mzChart"></div>
            </li> -->
        </ul>
        <script>
            var data, obj;
            axios.get('/findAllAnalysis')
                .then(function(res) {
                    console.log(res);
                    console.log(res.data);
                    obj = res.data
                    console.log(obj.data);
                    data = obj.data
                    console.log(data);
                    var findAllAnalysis = '';
                    for (let i = 0; i < data.length; i++) {
                        const arr = data[i]
                        findAllAnalysis += `
                            <li>
                                <div class="showImg">
                                    <img src="imageshoe.png" alt="">
                                </div>
                                <div class="data">
                                    <span>` + arr.name + `</span>
                                    <span>` + arr.quantity + `</span>
                                </div>
                                <div class="shoeChart"></div>
                            </li>
                            `
                    }
                    document.getElementById('findAllAnalysis').innerHTML = findAllAnalysis
                })
                .catch(function(error) {
                    console.log(error);
                })
        </script>




    </div>
    <!-- 折线图 -->
    <div class="lineChart">

    </div>
</div>

<!-- 底部模块 -->
<div class="bottom">
    <h5><span>数据状况</span></h5>
    <p>Data Status</p>
</div>
</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="./node_modules/echarts-liquidfill/dist/echarts-liquidfill.min.js"></script>
<script src="js/main.js"></script>

</html>